import {ScrollText} from "../ScrollText/ScrollText.js";
import {ToggleButton} from "../ToggleButton/ToggleButton.js";

function funcBlock(cup) {
    this.coef = 1;
    // 子按钮
    this.subToggleButton = null;
    // 子滚动文本
    this.subScrollText = null;

    this.cup = cup;
    if(!this.cup) return false;

    // 结构初始化
    this.__initStruct();

    // 框架
    this.FuncBlock = this.cup.querySelector(".FuncBlock");
    // 图标
    this.icon = this.cup.querySelector("i");
    // 尾部模块
    this.tailBox = this.cup.querySelector(".tailBox");
}

funcBlock.prototype.getCup = function() {
    return this.cup;
}

funcBlock.prototype.__initStruct = function() {
    let templet = `
        <!-- 功能块组件 -->
        <div class="FuncBlock">
            <div class="back">
                <!-- 头部模块 -->
                <div class="headBox">
                    <span class="icon"> <i style=""></i> </span>
                    <span class="label">
                        <!-- 滚动文字组件 -->
                        <div class="scrollText">

                        </div>
                    </span>

                    <!-- 按钮组件 -->
                    <div class="toggleButton">

                    </div>
                </div>

                <!-- 尾部模块 -->
                <div class="tailBox">
                    <!-- 装饰用 -->
                    <div class="line"></div>
                </div>
            </div>
        </div>
    `;

    this.cup.innerHTML = templet;

    // 创建子滚动文本
    this.subScrollText = ScrollText(this.cup.querySelector(".scrollText"));
    // 创建按钮组件
    this.subToggleButton = ToggleButton(this.cup.querySelector(".toggleButton"));
}

// 设置并启动尾部模块
funcBlock.prototype.setTailBox = function(dom) {
    if(!this.subToggleButton)
        return false;

    // 模块添加
    this.tailBox.appendChild(dom);
    // 模块大小控制
    this.subToggleButton.getCheckBox().addEventListener("click", () => {
        if(this.subToggleButton && this.subToggleButton.getCheckBox().checked)
            this.tailBox.style.maxHeight = `${this.FuncBlock.offsetHeight * 5}px`;
        else
            this.tailBox.style.maxHeight = "0";
    });
}

// 返回 checkBox
funcBlock.prototype.getCheckBox = function() {
    if(!this.subToggleButton)
        return false;
    return this.subToggleButton.getCheckBox();
}

// 设置图标
funcBlock.prototype.setIcon = function(img) {
    if(typeof img !== "string")
        return false;
    this.icon.style.backgroundImage = `url(${img})`;
}

// 设置文本
funcBlock.prototype.setText = function(text) {
    if(typeof text !== "string" || !this.subScrollText)
        return false;
    this.subScrollText.setText(text);
}

// 设置选中函数
funcBlock.prototype.setCheckedCallBack = function(callBack) {
    if(typeof callBack !== "function" || !this.subToggleButton)
        return false;
    this.subToggleButton.setCheckedCallBack(callBack);
}

// 设置取消选中函数
funcBlock.prototype.setNoCheckedCallBack = function(callBack) {
    if(typeof callBack !== "function" || !this.subToggleButton)
        return false;
    this.subToggleButton.setNoCheckedCallBack(callBack);
}

// 启动子组件监听
funcBlock.prototype.addClickRespon = function() {
    if(!this.subToggleButton)
        return false;
    this.subToggleButton.addClickRespon();
}

// 设置大小
funcBlock.prototype.setSize = function(coef) {
    if(!this.subScrollText || !this.subToggleButton)
        return false;
    this.coef = coef || this.coef;

    this.subScrollText.setRate(this.coef);
    this.subToggleButton.setSize(this.coef);
    this.FuncBlock.style.setProperty("--controlLen", String(window.innerWidth * this.coef));
}

function createFuncBlock(cup) {
    return new funcBlock(cup || null);
}

export var FuncBlock = createFuncBlock;